<!DOCTYPE html>
<html lang="en">
<head xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8">
  <title>学生信息管理系统</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">

  <script src="/js/jquery-3.6.1.min.js"></script>
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">

</head>
<body>
<br/>
<div class="container-fluid">

  <br/>
  <form class="form-inline">
    <div class="form-group">
      <label for="searchName">请输入教师的姓名:</label>
      <input type="text" class="form-control" id="searchName" placeholder="姓名" name="searchName">
    </div>
    <button type="button" class="btn btn-default btn-primary" onclick="search();">查询</button>
    <br>
    <br>
    <button type="button" class="btn btn-default btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">添加教师</button>
    <br>
    <br>
    <button type="button" class="btn btn-default btn-primary" onclick="Back();">返回主页</button>
  </form>

</div>
<br/><br/>
<div>
  <table class="table table-bordered " id="teaTable">

  </table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">教师信息</h4>
      </div>
      <div class="modal-body">

        <form id="formTeacher">

          <input hidden="hidden" id="id" name="id"/>

          <div class="form-group">
            <label for="tno">工号</label>
            <input type="text" class="form-control" id="tno" name="tno" placeholder="工号">
          </div>

          <div class="form-group">
            <label for="tname">姓名</label>
            <input type="text" class="form-control" id="tname" name="tname" placeholder="姓名">
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
          </div>

          <div class="form-group">
            <label for="sex">性别</label>
            <select class="form-control" id="sex" name="sex">
              <option >男</option>
              <option >女</option>
            </select>
          </div>

          <div class="form-group">
            <label for="age">年龄</label>
            <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
          </div>

          <div class="form-group">
            <label for="kecheng">任职课程</label>
            <input type="text" class="form-control" id="kecheng" name="kecheng" placeholder="任职课程">
          </div>

          <div class="form-group">
            <label for="cla">执教班级</label>
            <input type="text" class="form-control" id="cla" name="cla" placeholder="执教班级">
          </div>

        </form>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="saveTeacher();">保存</button>
      </div>
    </div>
  </div>
</div>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>


<script type="text/javascript">

  //xm查找
  function search(){

    var len=document.getElementById("searchName").value.length;

    if(len==0)
    {
      alert("输入的内容不能为空");
    }

    $('#teaTable').bootstrapTable("destroy");
    loadTable();

  }

  function preAdd(){

    $("#id").val(0) ; //提示新增

  }
  function Back(){   //可能是Bug,输入框清空后点击返回会实现

    $('#teaTable').bootstrapTable("destroy");
    loadTable();
  }

  //新增或者更新
  function saveTeacher(){

    var data=$("#formTeacher").serialize();

    var id=$("#id").val();

    if(id<1){
      //新增
      $.ajax({

        url:"/webapi/teacher/insert",
        method:"post",
        data:data

      }).done(function (){

        $('#teaTable').bootstrapTable("destroy");
        loadTable();
        $('#myModal').modal('hide')

      })
    }
    else{
      //更新
      $.ajax({

        url:"/webapi/teacher/update",
        method:"put",
        data:data

      }).done(function (){

        $('#teaTable').bootstrapTable("destroy");
        loadTable();
        $('#myModal').modal('hide')

      })

    }
  }

  //更新
  function editStudent(id){

    $('#myModal').modal('show');

    $.ajax({
      url:'/webapi/teacher/get/'+id

    }).done(function(rs){

      $("#id").val(rs.id);
      $("#tno").val(rs.tno);
      $("#age").val(rs.age);
      $("#cla").val(rs.cla);
      $("#kecheng").val(rs.kecheng);
      $("#tname").val(rs.tname);
      $("#password").val(rs.password);
      $("#sex").val(rs.sex);

    })

  }

  //删除
  function deleteStudent(id) {

    if (confirm("确定要删除?")) {
      //进入删除操作
      $.ajax({
        url: "/webapi/teacher/delete/" + id,
        method: 'delete',

      }).done(function () {
        $('#teaTable').bootstrapTable("destroy");
        loadTable();

      });
    }  //end if
  }

  function loadTable(){

    $('#teaTable').bootstrapTable({
      url: '/webapi/teacher/getbypage',

      striped:true,  //隔行变色效果
      pagination:true,  //底部会显示分页条
      singleSelect: false,  //true会禁止多选
      pageSize:5,   //每页数据条数
      pageNumber:1,   //首页页码
      sidePagination: "server",  //设置在哪分页
      queryParams:function(params) {
        var paraObj={

          size: params.limit,
          page: params.offset/params.limit,
          sort:"id",
          direct:"asc",
          name:$("#searchName").val()

        };
        return paraObj;
      },
      columns: [{
        field: 'id',
        title: '序号'
      }, {
        field: 'tno',
        title: '工号'
      }, {
        field: 'tname',
        title: '姓名'
      }, {
        field: 'sex',
        title: '性别'
      }, {
        field:'age',
        title:'年龄'
      },
        {
          field:'kecheng',
          title:'任职课程'
        },
        {
          field:'cla',
          title:'执教班级'
        },
        {
          field: 'id',
          title: '&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;操作',
          formatter: function (value, row, meta) {
            var operator = "<a href='#' onclick='editStudent("+ value +")'>修改</a> &nbsp; " +
                    "<a href='#' onclick='deleteStudent("+ value +")'>删除</a>";
            return operator;
          }
        },]
    });

  }
  $(function (){
    loadTable();
  })

</script>
</body>
</html>